<template>
  <div>
    <el-dialog
      :title="dialogType==1?'添加商品':'修改商品'"
      :visible.sync="isdialog"
      width="50%"
      :before-close="()=>{ resetForm('ruleForm') }"
    >
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
        <el-form-item label="商品标题" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>

        <el-form-item label="商品分类" prop="cat_id">
          <el-select v-model="ruleForm.cat_id" placeholder="请选择">
            <el-option
              v-for="item in classifyData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="售价" prop="selling_price">
          <el-input v-model="ruleForm.selling_price" type="number" />
        </el-form-item>

        <el-form-item label="商品封面图" prop="image">
          <el-upload
            class="uploadImg"
            :action="UPLOAD_URL"
            list-type="picture-card"
            name="image"
            :limit="1"
            :file-list="imgFileList"
            :on-success="handleSuccess"
            :on-preview="previewImg"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>

        <el-form-item label="商品主图" prop="banner">
          <el-upload
            class="uploadImg"
            :action="UPLOAD_URL"
            list-type="picture-card"
            name="image"
            :multiple="true"
            :file-list="bannerFileList"
            :on-success="handleSuccess2"
            :on-preview="previewImg"
            :on-remove="handleRemove2"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>

        <el-form-item label="商品内容" prop="content">
          <WangEditor v-model="ruleForm.content" />
        </el-form-item>

        <el-form-item label="虚拟销量" prop="void_sale">
          <el-input v-model="ruleForm.void_sale" type="number" />
        </el-form-item>

        <el-form-item label="库存" prop="stock">
          <el-input-number v-model="ruleForm.stock" :min="1" :max="9999" />
        </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-input v-model="ruleForm.sort" type="number" />
          <p class="hint">请输入数字，序号越大排序越靠前</p>
        </el-form-item>

        <el-form-item label="上架状态" prop="status">
          <el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="0" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">{{ dialogType==1?'确 定':'保 存' }}</el-button>
      </span>

    </el-dialog>

    <!-- 预览图片 -->
    <el-dialog :visible.sync="isImg">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import { UPLOAD_URL } from '@/env'
import WangEditor from '@/components/wangEditor/wangEditor.vue'
export default {
  components: { WangEditor },
  model: {
    prop: 'isdialog',
    event: 'change'
  },
  props: {
    isdialog: {
      type: Boolean || String,
      default: false
    },
    dialogType: {
      type: Number,
      default: 1
    },
    classifyData: {
      type: Array,
      default: () => { return [] }
    },
    editData: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      UPLOAD_URL,
      dialogImageUrl: '',
      isImg: false,

      editId: '',
      ruleForm: {},
      imgFileList: [], // 主图回显
      bannerFileList: [], // banner图回显
      rules: {
        name: { required: true, message: '请填写商品名称', trigger: 'blur' },
        cat_id: { required: true, message: '请选择商品分类', trigger: 'blur' },
        selling_price: { required: true, message: '请填写商品售价', trigger: 'blur' },
        image: { required: true, message: '请上传商品封面图', trigger: 'blur' },
        banner: { required: true, message: '请上传商品主图', trigger: 'blur' }
      }
    }
  },
  watch: {
    editData: {
      handler: function(newVal) {
        if (this.dialogType === 2) {
          const { id, name, image, banner, void_sale, status, sort, cat_id, selling_price, content } = newVal
          const bannerArry = banner.split(',')
          this.ruleForm.name = name
          this.ruleForm.image = image
          this.ruleForm.void_sale = void_sale
          this.ruleForm.banner = bannerArry
          this.ruleForm.status = Number(status)
          this.ruleForm.sort = sort
          this.ruleForm.id = id
          this.ruleForm.cat_id = cat_id
          this.ruleForm.selling_price = selling_price
          this.ruleForm.content = content

          this.imgFileList = [{ url: image }]
          this.bannerFileList = bannerArry.map(item => {
            return { url: item }
          })
        } else {
          this.ruleForm = {
            name: '',
            image: '',
            banner: [],
            void_sale: 0,
            status: 1,
            sort: 1,
            stock: '',
            cat_id: '',
            selling_price: '',
            content: ''
          }
          this.imgFileList = []
          this.bannerFileList = []
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 添加商品
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.banner = this.ruleForm.banner.join(',')
          this.$request.post('/admin/goods/save', this.ruleForm).then(res => {
            this.$emit('change', false)
            this.$emit('success')
          }).catch()
        }
      })
    },
    // 清除验证
    resetForm(formName) {
      this.$refs[formName].clearValidate()
      this.$emit('change', false)
    },

    // 商品封面图上传
    handleSuccess(res) {
      if (res.code == 200) {
        this.imgFileList = [{ url: res.data.path }]
        this.ruleForm.image = res.data.path
      } else {
        this.$message.error(res.msg)
      }
    },
    handleRemove() {
      this.imgFileList = []
      this.ruleForm.image = ''
    },

    // 商品主图上传
    handleSuccess2(res) {
      if (res.code == 200) {
        this.ruleForm.banner.push(res.data.path)
      } else {
        this.$message.error(res.msg)
      }
    },
    handleRemove2(res, fileList) {
      this.ruleForm.banner = fileList.map(item => item.response.data.path)
    },

    // 预览图片
    previewImg(file) {
      this.dialogImageUrl = file.url
      this.isImg = true
    }
  }
}
</script>
<style lang="scss" scoped>
    .hint{
        margin: 0;
        padding: 0;
        color: #aaa;
        font-size: 12px;
    }
    .uploadImg ::v-deep .el-upload--picture-card{
      height:100px;
      width:100px;
      line-height: 104px;
    }
    .uploadImg ::v-deep .el-upload-list--picture-card .el-upload-list__item{
      height:100px;
      width:100px;
      line-height: 104px;
    }
    .uploadImg ::v-deep .el-icon-upload-success{
      position: absolute;
      right: 15px;
      top: 0px;
    }
</style>
